<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      
    </style>
    <title>注册</title>

    <link rel="stylesheet" href="welcome.css">
</head>

<body>
    <h3 span style="color: blue;">&nbsp;&nbsp;欢迎注册会员</h3>
    <div id="login">
        <form action="welcome.html" method="POST">
            <div>
                <label for="phonenumber"><strong>手机号码：</strong></label>
                <input type="text" id="phonenumber" placeholder="11位手机号">
                <span style="color: red;">必填</span>
            </div>

            <div>
                <label for="password"><strong>创建密码：</strong></label>
                <input type="password" id="password" placeholder="8位密码">
                <span style="color: red;">必填</span>
            </div>

            <div>
                <label for="email"><strong>注册邮箱：</strong></label>
                <input type="text" id="email" placeholder="例如：2066813817@qq.com">
                <spans style="color: red;">必填</span>
            </div>

            <div>
                <label for="yes" style="margin-left:15px"> <strong>验证码：</strong> </label>
                <input type="text" id="yes">
                <img src="C:\Users\86181\Pictures\Saved Pictures\th.jpg" alt="图片验证码" width="50" height="25">
                <img src="../素材/images/arrow_03.png" alt="照片" width="20" height="20">
            </div>

            <div>
                <label for="sex" style="margin-left:31px"><strong>性别：</strong></label>
                <input type="radio" name="sex" value="male">男
                <input type="radio" name="sex" value="female">女
            </div>

            <div>
                <label for="birthday" style="margin-left:31px"><strong>生日：</strong></label>
                <input type="date" name="mydate">
            </div>

            <div>
                <label for="ege" style="margin-left:31px"><strong>年龄：</strong></label>
                <input type="text" id="ege">
            </div>

            <div class="sel">
                <label for="ege" style="margin-left:31px"><strong>籍贯：</strong></label>
                <select id="j">
                    <option value="01">湖北省</option>
                </select>
                <select id="g">
                    <option value="11">武汉</option>
                </select>
            </div>

            <div>
                <label for="study"><strong>个人学历：</strong></label>
                <select id="s">
                    <option value="0">专科</option>
                    <option value="1">本科</option>
                    <option value="2">研究生</option>
                    <option value="3">博士</option>
                </select>
            </div>

            <div>
                <label for="money" style="margin-left:31px"><strong>月薪：</strong></label>
                <input type="range" id="money" name="money" min="0.0" max="10000.0" step="100.0" value="5000.0">
                <span id="msg"></span>
                <script>
                    var msg = document.getElementById("msg");
                    window.onload = function () {
                        msg.innerHTML = document.getElementById("money").value;
                    }
                    document.getElementById("money").onmousemove = function () {
                        msg.innerHTML = this.value;
                    }
                </script>

            </div>

            <div>
                <label for="like"><strong>个人爱好：</strong></label>
                <input type="checkbox" id="like" value="sing">唱歌
                <input type="checkbox" id="like" value="run">跑步
                <input type="checkbox" id="like" value="swimming">游泳
            </div>

            <div id="test-image-preview">
                <label for="picture"><strong>个人照片：</strong></label>
                <input type="file" id="test-image-file" accept="image/*">
                <p    id="test-file-info"></p>
                <script>
                    var fileInput = document.getElementById('test-image-file');
                    var info = document.getElementById('test-file-info');
                    var preview = document.getElementById('test-image-preview');
                    fileInput.addEventListener('change', function () {
                        preview.style.backgroundImage = ''; 
                        if (!fileInput.value) {
                            info.innerHTML = '没有选择文件';
                            return;
                        }
                        var file = fileInput.files[0]; 
                        info.innerHTML = '文件: ' + file.name + '<br>' + '大小: ' + file.size + '<br>' + '修改: ' +
                            file.lastModifiedDate;
                        if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !==
                            'image/gif') {
                            alert('不是有效的图片文件!');
                            return;
                        }
                        var reader = new FileReader(); 
                        reader.onload = function (e) { 
                            var data = e.target
                            .result; 
                            preview.style.backgroundImage = 'url(' + data + ')';
                        };
                        reader.readAsDataURL(file); 
                    });
                </script>
            </div>

            <div>
                <div class="title">个人简历：</div>
                <div>
                    <textarea name="intro" cols="29" rows="10"></textarea>
                </div>
            </div>

            <div>
                <input style="margin-left:90px" type="submit" value="提交">
                <input type="reset" value="重置">
            </div>

        </form>

    </div>

</body>

</html>